<template>
	<!-- 营地订单 -->
	<view class="outtor">
		<view class="menu_title">
			<view class="bottom_border" @click="index = 0"><text :class="index==0?'cor':''">全部订单</text></view>
			<view class="bottom_border" @click="index = 1"><text :class="index==1?'cor':''">待支付</text></view>
			<view class="bottom_border" @click="index = 2"><text :class="index==2?'cor':''">待使用</text></view>
			<view class="bottom_border" @click="index = 3"><text :class="index==3?'cor':''">使用中</text></view>
			<view class="bottom_border" @click="index = 4"><text :class="index==4?'cor':''">已完成</text></view>
		</view>
		<view class="order_content" v-if="orders.length==0">
			<text>暂无数据</text>
		</view>
		<view class="order_detail">
			<view class="order_detail_content" v-if="orders.length!=0" v-for="(order,index) in orders">
				<view class="content_left">
					<image :src="order.url"></image>
				</view>
				<view class="content_right">
					<view class="content_right_top">
						<view>
							<view>
								<text>开始时间</text>
							</view>
							<view class="blue">
								<text>{{order.startTime}}</text>
							</view>
						</view>
						<view class="quan">
							<text>{{order.days}}天</text>
						</view>
						<view>
							<view>
								<text>结束时间</text>
							</view>
							<view class="blue">
								<text>{{order.endTime}}</text>
							</view>
						</view>
					</view>
					<view class="content_right_bottom">
						<view>
							<text>{{order.campName}}</text>
						</view>
						<view>
							<text>{{order.carName}}</text>
						</view>
						<view>
							<text>总价：￥{{order.total}}元</text>
						</view>
						<view class="butt">
							<button v-if="order.status==1"  @click="gotoconfirm(index)">立即支付</button>
							<button v-if="order.status==2"  @click="cancelAppointment(index)">取消预约</button>
							<button v-if="order.status==3"  @click="gotoconfirm(index)">中途退房</button>
							<button v-if="order.status==4 & order.wait!=null" >{{order.wait}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				orders: [],
				carcache:[],
				user:''
			}
		},
		onLoad() {
			
			this.selectOrder()
		},
		methods: {
			selectOrder() {
				this.user = uni.getStorageSync('user')
				if(this.user!=null){
					uni.request({
						url: this.webUrl+'order/appointment?status=' + this.index+'&userId='+this.user.userId,
						success: (res) => {
							console.log(res.data.list)
							this.orders = res.data.list;
						}
					});
				}else{
					uni.showToast({
						title:'您还未登录'
					})
				}
				
			},
			//取消预约
			cancelAppointment(index){
				uni.request({
					url: this.webUrl+'order/cancelAppointmentBefor?appId='+this.orders[index].appId,
					success: (res) => {
						console.log(res)
						uni.showToast({
							title:res.data.message
						})
					}
				});
			},
			//支付界面
			gotoconfirm(i){
				uni.setStorage({
					key:"carcache",
					data:[]
				})
				console.log(this.orders[i])
				var stime = this.orders[i].startTime;
				var etime = this.orders[i].endTime;
				var days = this.orders[i].days;
				var campName = this.orders[i].campName;
				var carName = this.orders[i].carName;
				var price = this.orders[i].price;
				var url = this.orders[i].url;
				var total = this.orders[i].total;
				var appId = this.orders[i].appId;
				this.carcache.push({
					startTime: stime,
					endTime: etime,
					days: days,
					campName:campName,
					carName:carName,
					price:price,
					url:url,
					total: total,
					appId:appId
				});
				uni.setStorage({
					key:"carcache",
					data:this.carcache
				})
				uni.navigateTo({
					url:"/pages/appointment_confirm/appointment_confirm"
				})
			}
		},
		watch: {
			'index': function() {
				this.selectOrder();
			}
		}
	}
</script>

<style lang="scss">
	.outtor {
		background-color: #DCDDDD;
		min-height: 1250rpx;
		width: 750rpx;

		.order_detail {
			width: 100%;
			font-size: 30rpx;
			background-color: white;
			position: relative;
			margin-top: 10rpx;

			.order_detail_content {
				border-top: 1rpx solid #AAAAAA;
				width: 100%;
				height: 300rpx;

				.content_left {
					width: 30%;
					padding-top: 20rpx;
					padding-left: 20rpx;

					image {
						width: 100%;
						height: 100rpx;
					}
				}

				.content_right {
					width: 70%;
					position: relative;
					top: -110rpx;
					left: 250rpx;
					text-align: center;
					font-size: 28rpx;
					margin-left: 20rpx;

					.content_right_top {
						width: 100%;
						height: 90rpx;
						display: flex;
						flex-wrap: wrap;

						.quan {
							width: 120rpx;
							height: 50rpx;
							line-height: 50rpx;
							border: 1rpx solid #AAAAAA;
							border-radius: 30rpx;
							margin-top: 15rpx;
							margin-left: 20rpx;
							margin-right: 20rpx;
						}

						.blue {
							color: #4CA2FF;
						}
					}

					.content_right_bottom {
						width: 100%;
						height: 120rpx;
						line-height: 40rpx;
						text-align: left;
						.butt{
							float: right;
							width: 150rpx;
							height: 100rpx;
							margin-right: 80rpx;
							margin-top: -35rpx;
							button{
								font-size: 28rpx;
								line-height: 50rpx;
								color: white;
								background-color: #FF3333;
								width: 180rpx;
								height: 50rpx;
							}
						}
					}
				}
			}
		}

		.order_content {
			width: 750rpx;
			height: 220rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 220rpx;
			background-color: white;
			margin-top: 10rpx;
		}

		.menu_title {
			width: 750rpx;
			height: 100rpx;
			background-color: #464646;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			line-height: 100rpx;
			color: white;
			font-size: 30rpx;
			text-align: center;

			.bottom_border {
				width: 20%;
				height: 100rpx;

				.cor {
					color: #FF3333;
				}
			}
		}
	}
</style>
